<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="18">
                <!-- 数目统计列表 -->
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <span><i class="el-icon-third-icon-oc-wallet grid-con-icon"></i></span>
                                <div class="grid-cont-right">
                                    <div class="grid-num">1234 元</div>
                                    <div>今日营业额</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-third-dingdanshu grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">321 笔</div>
                                    <div>今日付款单数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-third-fangwenliang grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">5000 次</div>
                                    <div>今日访问量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
            <!-- 打印机模块 -->
            <el-col :span="6" >
                <el-row type="flex" justify="space-around" class="status-container">
                    <el-col :span="8"> 
                       <div @click="checkPainter" class="status-item">
                            <p><i class="el-icon-third-dayinji pic-item"></i></p>
                            <p>未连接打印机</p> 
                        </div>
                    </el-col> 
                    <el-col :span="7">
                         <div @click="checkPainter" class="status-item">
                            <p><i class="el-icon-third-zidongjiedan pic-item"></i></p>
                            <p>未自动接单</p> 
                        </div>
                    </el-col> 
                    <el-col :span="9">
                         <div @click="checkPainter" class="status-item">
                            <p><i class="el-icon-third-iconfontxiaoquxinwen pic-item"></i></p>
                            <p>未启动自动播报</p> 
                        </div>
                    </el-col> 
                </el-row>
            </el-col>
        </el-row>
        <el-row :gutter="20" >
            <el-col class="daiban-container">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>待办事项</span>
                        <!-- <el-button style="float: right; padding: 3px 0" type="text">添加</el-button> -->
                    </div>
                    <!-- 堂食模块 -->
                    <el-card  class="margin-bottom:10px;">
                        <div slot="header" class="clearfix">堂食</div>
                        <el-row :gutter="12">
                            <el-col :span="8">                             
                                <el-card shadow="hover">堂食订单 - 待付款 <div style="float:right;padding:3px 0; font-size:12px;color:blue">0个订单</div> </el-card>
                            </el-col>

                        </el-row>
                   </el-card>
                   <div>&nbsp;</div>
                    <el-card > 
                         <div slot="header" class="clearfix">
                            <span>外卖</span>
                        </div>
                         <el-row :gutter="10">
                            <el-col :span="8">
                                <el-card shadow="hover">外卖订单 - 待接单 <div style="float:right;padding:3px 0; font-size:12px;color:blue">0个订单</div> </el-card>
                                <!-- <el-card shadow="hover">外卖订单 - 待发货 <div style="float:right;padding:3px 0; font-size:12px;color:blue">0个订单</div> </el-card> -->
                            </el-col>   
                            <el-col :span="8">
                                <el-card shadow="hover">外卖订单 - 待发货 <div style="float:right;padding:3px 0; font-size:12px;color:blue">0个订单</div> </el-card>
                            </el-col>    
                    </el-row>

                    </el-card>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :data="data" type="bar" :options="options"></schart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="line" class="schart" canvasId="line" :data="data" type="line" :options="options2"></schart>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Schart from 'vue-schart';
    import bus from '../common/bus';
    export default {
        name: 'dashboard',
        data() {
            return {
                printer_status:false,
                name: localStorage.getItem('ms_username'),
                todoList: [{
                        title: '今天要修复100个bug',
                        status: false,
                    },
                    {
                        title: '今天要修复100个bug',
                        status: false,
                    },
                    {
                        title: '今天要写100行代码加几个bug吧',
                        status: false,
                    }, {
                        title: '今天要修复100个bug',
                        status: false,
                    },
                    {
                        title: '今天要修复100个bug',
                        status: true,
                    },
                    {
                        title: '今天要写100行代码加几个bug吧',
                        status: true,
                    }
                ],
                data: [{
                        name: '2018/09/04',
                        value: 1083
                    },
                    {
                        name: '2018/09/05',
                        value: 941
                    },
                    {
                        name: '2018/09/06',
                        value: 1139
                    },
                    {
                        name: '2018/09/07',
                        value: 816
                    },
                    {
                        name: '2018/09/08',
                        value: 327
                    },
                    {
                        name: '2018/09/09',
                        value: 228
                    },
                    {
                        name: '2018/09/10',
                        value: 1065
                    }
                ],
                options: {
                    title: '最近七天每天的用户访问量',
                    showValue: false,
                    fillColor: 'rgb(45, 140, 240)',
                    bottomPadding: 30,
                    topPadding: 30
                },
                options2: {
                    title: '最近七天用户访问趋势',
                    fillColor: '#FC6FA1',
                    axisColor: '#008ACD',
                    contentColor: '#EEEEEE',
                    bgColor: '#F5F8FD',
                    bottomPadding: 30,
                    topPadding: 30
                }
            }
        },
        components: {
            Schart
        },
        computed: {
            role() {
                return this.name === 'admin' ? '超级管理员' : '普通用户';
            }
        },
        created(){
            this.handleListener();
            this.changeDate();
        },
        activated(){
            this.handleListener();
        },
        deactivated(){
            window.removeEventListener('resize', this.renderChart);
            bus.$off('collapse', this.handleBus);
        },
        methods: {
            changeDate(){
                const now = new Date().getTime();
                this.data.forEach((item, index) => {
                    const date = new Date(now - (6 - index) * 86400000);
                    item.name = `${date.getFullYear()}/${date.getMonth()+1}/${date.getDate()}`
                })
            },
            handleListener(){
                bus.$on('collapse', this.handleBus);
                // 调用renderChart方法对图表进行重新渲染
                window.addEventListener('resize', this.renderChart)
            },
            handleBus(msg){
                setTimeout(() => {
                    this.renderChart()
                }, 300);
            },
            renderChart(){
                this.$refs.bar.renderChart();
                this.$refs.line.renderChart();
            },
            checkPainter(){
                console.log("检查打印机状态")
            }
        }
    }

</script>


<style lang="scss" scoped>
    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }

    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }

    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }

    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }

    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }

    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-bottom: 20px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }

    .schart {
        width: 100%;
        height: 300px;
    }

    /* 添加打印机、自动接单模块的子项 */
    // .icon-item-my{
    //     // margin-bottom: 10px;
    //     // width:3
    //     //  width: 120px;
    //     // height: 80px;
    //     // position: relative;
    //     // display: flex;
    //     //      flex-direction: column;
    //     //     justify-content: center;
    //     //      vertical-align:middle;        
    //         a{
    //             text{
    //                 font-size:10px;
    //                 color: #ccc;
    //             }
    //             color: black;
    //         }
    //         div{
    //             display: flex;
    //             justify-content:center;
    //         }

    // }
    .status-container{
        // margin: 0;
        // padding: 0;

        .status-item{
            cursor: pointer;
            // display: flex;
            // justify-content: center;
            margin:2px;
            padding: 2px;
            border: 1px solid #ebeef5;
            border-radius: 10px;
            background-color: #fff;
            color: #303133;
            -webkit-transition: .3s;
            transition: .3s;
            // width:90px;

        }
        p{
            display: flex;
            justify-content: center;
            font-size:12px;
            margin:10px 0;
            // line-height: 20px;

            .pic-item{
            font-size: 40px;
            text-align: center;
        }
            
        }
        
    }
    // 待办模块
    .daiban-container{
        margin-top:-20px;
        
    }

</style>
